<template>
  <div>
    <div v-if="!$isMobile" class="g-con container-pc">
      <Banner bannerModel="7" />

      <div class="banner-title">
        {{ t('crew.i_t1') }}
      </div>
      <div class="g-con">
        <div class="left-filter">
          <el-button type="primary" style="width: 100%; height: 50px; border-radius: 0px" @click="addCrewFn">
            {{ t('crew.i_b1') }}
          </el-button>
          <el-row class="row-style">
            <el-col :span="22" :offset="1" class="mt-2">
              <el-select :placeholder="t('crew.u1')" class="wp-100" v-model="queryForm.crewLocationCode" clearable filterable>
                <el-option v-for="item in countryOptionList" :key="item.id" :label="item.countryName"
                  :value="item.countryCode">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="22" :offset="1" class="mt-2">
              <el-select v-model="queryForm.duties" :placeholder="t('crew.u3')" class="wp-100" clearable filterable>
                <el-option v-for="item in dictData.duties" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="22" :offset="1" class="mt-2">
              <el-select v-model="queryForm.shippingType" :placeholder="t('crew.u5')" class="wp-100" clearable filterable>
                <el-option v-for="item in dictData.ships_type" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </el-col>
            <!-- <el-col :span="22" :offset="1" class="mt-2">
              <el-date-picker @change="dateChange($event, 'nextSignOnDate')" style="width: 100%" v-model="dateValue"
                type="date" :placeholder="t('crew.f1')" />
            </el-col> -->
            <el-col :span="22" :offset="1" class="mt-2">
              <el-select v-model="queryForm.crewStatus" filterable clearable :placeholder="t('personalInformation.p4')" class="wp-100">
                <el-option
                  v-for="child in dictData.resume_work_status"
                  :key="child.id"
                  :value="child.dictValue"
                  :label="child.dictLabel"
                  >{{ child.dictLabel }}</el-option
                >
              </el-select>
            </el-col>
            <el-col :span="20" :offset="2" class="mt-2" v-if="showTotal">
              <div style="text-align: right; font-size: 12px">
                <span style="color: rgba(202, 42, 2, 1)">
                  {{ crewTotal }}
                </span>
                {{ t('crew.i_c1') }}<template v-if="locale === 'en' && crewTotal > 1">s</template>
              </div>
            </el-col>
            <el-col :span="22" :offset="1" class="mt-2 mb-2">
              <el-button type="primary" class="wp-100 ht-4 find" @click="onQuery">{{ t('crew.i_b2_1') }}</el-button>
            </el-col>
          </el-row>

          <div class="advertisement">
            <a :href="getAd('9', 'href')" target="_blank">
              <img :src="getAd('9', 'image')" alt="" />
            </a>
          </div>
        </div>
        <div class="right-list">
          <ul class="list">
            <li v-for="(item, index) in crewList" :key="index" class="item" @click="detailLink(item)">
              <el-row>
                <el-col :span="24">
                  <img :src="item.headSculpture" />
                </el-col>
                <el-col :span="24" class="name nowrap line-1">{{ item.crewName }}</el-col>
                <el-col :span="24" class="country">{{ item.crewLocation }}</el-col>
                <el-col :span="24" class="experience">{{ getDictLabel('duties', item.duties) }}</el-col>
                <el-col :span="24" class="status">
                  <div>
                    {{ getDictLabel('resume_work_status', item.crewStatus) }}
                  </div>
                </el-col>
              </el-row>
            </li>
          </ul>
          <div class="flexec mt-3">
            <el-pagination :hide-on-single-page="crewTotal <= crewPage.pageSize" layout="prev, pager, next" :total="crewTotal" v-model:current-page="crewPage.pageNum"
              :page-size="crewPage.pageSize" @current-change="crewHandleCurrentChange">
            </el-pagination>
          </div>
        </div>
      </div>
      <div class="banner-title">
        {{ t('crew.i_t2') }}
      </div>
      <div class="g-con">
        <div class="left-filter">
          <el-button type="primary" style="width: 100%; height: 50px; border-radius: 0px" @click="addRecruit">
            {{ t('crew.i_b3') }}
          </el-button>
          <el-row class="row-style">
            <el-col :span="22" :offset="1" class="mt-2">
              <el-select :placeholder="t('crew.recruit.l3')" class="wp-100" v-model="recuitQueryForm.crewLocationCode"
                clearable filterable>
                <el-option v-for="item in countryOptionList" :key="item.id" :label="item.countryName"
                  :value="item.countryCode">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="22" :offset="1" class="mt-2">
               <el-select v-model="recuitQueryForm.recruitDuties" :placeholder="t('crew.recruit.l1')" class="wp-100" clearable filterable>
                <el-option v-for="item in dictData.duties" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="22" :offset="1" class="mt-2">
              <el-select v-model="recuitQueryForm.shippingType" :placeholder="t('crew.recruit.l4')" class="wp-100"
                clearable filterable>
                <el-option v-for="item in dictData.ships_type" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </el-col>
            <!-- <el-col :span="22" :offset="1" class="mt-2">
              <el-date-picker v-model="dateTime.onDutyTime" type="date" :placeholder="t('crew.recruit.l11')"
                @change="dateChange2($event, 'onDutyTime')" style="width: 100%" />
            </el-col> -->

            <el-col v-if="showTotal2" :span="20" :offset="2" class="mt-2">
              <div style="text-align: right; font-size: 12px">
                <span style="color: rgba(202, 42, 2, 1)">
                  {{ recuitTotal }}
                </span>
                {{ t('crew.i_c1') }}<template v-if="locale === 'en' && recuitTotal > 1">s</template>
              </div>
            </el-col>
            <el-col :span="22" :offset="1" class="mt-2 mb-2">
              <el-button type="primary" class="wp-100 ht-4 find" @click="onQuery2">{{ t('crew.i_b2_2')
              }}</el-button>
            </el-col>
          </el-row>

          <div class="advertisement" style="height: 370px">
            <a :href="getAd('10', 'href')" target="_blank">
              <img :src="getAd('10', 'image')" alt="" />
            </a>
          </div>
        </div>
        <div class="right-list">
          <ul class="recruit-list">
            <li v-for="item in recuitList" :key="item.id" class="item" @click="viewRecuitDetail(item)">
              <div class="item-left">
                <img :src="item.enterpriseLogo" alt="" />
              </div>
              <div class="item-right">
                <p class="title line-1">
                  {{ getDictLabel('duties', item.recruitDuties) }}
                </p>
                <!-- <p
                  class="people"
                  v-if="locale === 'en'"
                >
                  Recruiting {{ item.recruitNumber }} people
                </p>
                <p
                  class="people"
                  v-if="locale === 'zh-CN'"
                >
                  招聘 {{ item.recruitNumber }} 人
                </p> -->
                <p class="location">
                  {{ item.crewLocation }},{{ item.navigationArea }}
                  <img src="@/assets/img/icon_dizhi_a.png" alt="" style="height: 18px" />
                </p>
              </div>
            </li>
          </ul>

          <div class="flexec mt-3">
            <el-pagination :hide-on-single-page="recuitTotal <= recuitPage.pageSize" layout="prev, pager, next" :total="recuitTotal" v-model:current-page="recuitPage.pageNum"
              :page-size="recuitPage.pageSize" @current-change="recuitHandleCurrentChange">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <div v-if="$isMobile">
      <mIndex />
    </div>

    <!-- 招聘 -->
    <AddRecruit v-if="dialogRecruit" v-model="dialogRecruit" :item-id="itemId" :type="recuitType" @getList="getRecuitListFn"/>
  </div>
</template>
<script setup>
import { onMounted, ref, watch, getCurrentInstance } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { listPage, getRecuitList } from '@/service/crew.js'
import { countryListApi } from '@/service/common.js'
import mIndex from './mIndex.vue'
import useDict from '@/hooks/useDict'
import useAd from '@/stores/ad'
import Banner from '@/components/Banner.vue'
import useLogin from '@/stores/login'
import { getOrganization } from '@/service/organizationStructure'
import { openUrl } from '@/utils'

import AddRecruit from './AddRecruit.vue'

const storeLogin = useLogin()
const storeAd = useAd()
const { getAd } = storeAd

const { dictData, getDictData, getDictLabel } = useDict()
const { $isMobile } = getCurrentInstance().appContext.config.globalProperties
const { t, locale } = useI18n()

onMounted(() => {
  init()
})
watch(locale, () => {
  init()
})

const router = useRouter()
const route = useRoute()

const isViewResume = ref(false)

// 企业信息
const getOrganizationInfoFn = () => {
  if (!storeLogin?.userInfo?.enterpriseId) return
  getOrganization(storeLogin.userInfo.enterpriseId).then(({ data }) => {
    isViewResume.value = data.viewResumeFlag === '1'
  })
}

const openDia = () => {
  const d = route.query.d
  if (d === '1') {
    addCrewFn()
  }
  if (d === '2') {
    addRecruit()
  }
}

const countryOptionList = ref([])
const crewList = ref([])
const recuitList = ref([])
const dateValue = ref([])
const addCrewFn = () => {
  if (!storeLogin.userInfo?.id) {
    ElMessage.warning(t('needLogin'))
    return
  }
  if (!['15'].includes(storeLogin.userInfo.customerClassCode)) {
    ElMessage.warning(t('noPermission'))
    return
  }
  openUrl('/addCrewResume', { pageType: 'add' })
}

//
const queryForm = ref({
  crewLocation: undefined,
  duties: undefined,
  // crewStatus:"resume_work_status_1",
  nextSignOnDate: undefined
})
const showTotal = ref(false)
const crewPage = ref({
  pageNum: 1,
  pageSize: 6
})
const crewTotal = ref(0)
const getList = () => {
  listPage(crewPage.value, queryForm.value).then(({ rows, total }) => {
    rows.forEach((item) => {
      if (!isViewResume.value) {
        item.crewName = `*${item.crewName.substr(1)}`
      }
    })
    crewList.value = rows
    crewTotal.value = total
  })
}
// 分页
const crewHandleCurrentChange = (val) => {
  getList()
}
const onQuery = () => {
  crewPage.value.pageNum = 1
  showTotal.value = Object.keys(queryForm.value).some(item=>queryForm.value[item])
  getList()
}

const detailLink = (item) => {
  openUrl('/crewResume', { id: item.id })
}

// const dateChange = (val, key) => {
//   if (val) {
//     // 10位时间戳
//     queryForm.value[key] = String(val).substring(0, 10) * 1
//   } else {
//     queryForm.value[key] = null
//   }
// }

const dateTime = ref({
  onDutyTime: null
})
const dateChange2 = (val, key) => {
  if (val) {
    // 10位时间戳
    recuitQueryForm.value[key] = String(val).substring(0, 10) * 1
  } else {
    recuitQueryForm.value[key] = null
  }
}

const dialogRecruit = ref(false)
watch(dialogRecruit, (n) => {
  if (!n) {
    recuitType.value = 'add'
  }
})
const addRecruit = () => {
  if (!storeLogin.userInfo?.id) {
    ElMessage.warning(t('needLogin'))
    return
  }
  dialogRecruit.value = true
}
const recuitQueryForm = ref({
  crewLocation: undefined,
  duties: undefined,
  shippingType: undefined
})
const showTotal2 = ref(false)
const recuitPage = ref({
  pageNum: 1,
  pageSize: 8
})
const recuitTotal = ref(0)
const getRecuitListFn = () => {
  getRecuitList({ ...recuitPage.value, ...recuitQueryForm.value }).then(({ rows, total }) => {
    recuitList.value = rows
    recuitTotal.value = total
  })
}
// 分页
const recuitHandleCurrentChange = (val) => {
  getRecuitListFn()
}
const onQuery2 = () => {
  recuitPage.value.pageNum = 1
  showTotal2.value = Object.keys(recuitQueryForm.value).some(item=>recuitQueryForm.value[item])
  getRecuitListFn()
}


const recuitType = ref('add')
const itemId = ref(null)
const viewRecuitDetail = (item) => {
  recuitType.value = 'detail'
  itemId.value = item.id
  dialogRecruit.value = true
}

// const dictData = ref({})
// const getDictData = async (dictType) => {
//   await dictDataApi({ dictType }).then(({ data }) => {
//     dictData.value[dictType] = data
//   })
// }
const init = async () => {
  await getOrganizationInfoFn()
  getList()
  getRecuitListFn()
  countryListApi().then((res) => {
    countryOptionList.value = res.data
  })
  getDictData('resume_work_status')
  getDictData('duties')
  getDictData('ships_type')
  getDictData('sys_user_sex')

  openDia()
}
</script>
<style scoped lang="scss">
.container-pc {
  .banner {
    width: 100%;
    // height: 360px;

    .swiper-container {
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .banner-title {
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-bottom: 2px solid black;
    font-size: 20px;

    font-weight: bold;
    color: #ca2a02;
    margin-bottom: 30px;
  }

  .g-con {
    width: 100%;
    display: grid;
    grid-template-columns: 290px auto;
    gap: 20px;

    .left-filter {
      :deep(.el-input__wrapper) {
        width: 100%;
      }

      .row-style {
        width: 100%;
        background: rgba(245, 245, 245, 1);
        margin-top: 20px;
        // height: 300px;

        :deep(.el-input__inner) {
          height: 40px;
        }

        .find {
          background: #252628;
          font-size: 12px;

          font-weight: bold;
          color: #ffffff;
          border: 2px solid #252628;
        }
      }

      .advertisement {
        width: 100%;
        margin-top: 30px;
        height: 450px;
        background: black;

        a {
          display: block;
          width: 100%;
          height: 100%;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }

    .right-list {
      // flex: 1;
      // border: 1px solid;

      .list {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 24px;
        row-gap: 30px;

        .item {
          max-width: 300px;
          height: 370px;
          background: rgba(245, 245, 245, 1);
          padding: 15px;
          cursor: pointer;

          .el-col {
            img {
              width: 100%;
              height: 180px;
              object-fit: contain;
              background: #fff;
            }

            text-align: center;
            margin-bottom: 6px;
          }

          .name {
            margin-top: 20px;
            font-size: 18px;
            font-weight: bold;
            color: #252628;
          }

          .status {
            font-size: 10px;
            font-weight: 400;
            color: #ca2a02;

            div {
              min-width: 90px;
              max-width: 190px;
              margin: 0 auto;
              height: 36px;
              line-height: 36px;
              background: rgb(243, 178, 162);
            }
          }

          .country {
            font-size: 12px;
            font-weight: 400;
            color: #252628;
          }

          .experience {
            font-size: 14px;
            font-weight: 400;
            color: #01358d;
          }
        }
      }

      .recruit-list {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 470px);
        gap: 10px;
        row-gap: 30px;

        .item {
          display: grid;
          grid-template-columns: 120px 305px;
          padding: 15px;
          height: 150px;
          background: rgba(245, 245, 245, 1);
          cursor: pointer;

          .item-left {
            width: 120px;
            height: 120px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .item-right {
            margin-left: 15px;
            padding-top: 30px;
            overflow: hidden;

            .title {
              font-size: 18px;
              font-weight: bold;
              color: #252628;
              margin-bottom: 14px;
              max-width: 100%;
            }

            .people {
              font-size: 14px;
              font-weight: 400;
              color: #6a6973;
              line-height: 24px;
            }

            .location {
              font-size: 14px;
              font-weight: 400;
              color: #6a6973;
              line-height: 26px;
              display: flex;
              justify-content: end;

              img {
                margin-left: 6px;
                margin-top: 4px;
              }
            }
          }
        }
      }
    }
  }
}

:deep(.el-dialog__title) {
  color: rgba(202, 42, 2, 1);
}

.dialog-form {
  :deep(.el-input__inner) {
    height: 40px;
  }

  :deep(.el-select) {
    width: 100%;
  }
}

:deep(.el-input-number .el-input__inner) {
  text-align: left;
}
</style>
